Twitter Card
https://gyazo.com/77ea598963604fa2b5e57c07581de594
Cache clear
https://cards-dev.twitter.com/validator
code::
const description = props.json.descriptions
.map((line) => line.replace(/\.*?\/g, ""))
.join(" ");
return (
<>
<Head>
<title>{title} - NISHIO Hirokazu</title>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="nishio" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={props.json.image} />
</Head>
old title Twitterカード
カードの利用開始 — Twitter Developers
Open Graphのタグとの組み合わせ方が末尾に書いてある
code:ts
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@nishio" />
<meta property="og:url" content="https://shinuwani.netlify.com/" />
<meta property="og:title" content="○年後に死ぬあなた" />
<meta property="og:description" content="漫画「100日後に死ぬワニ」を見てたら自分が何年後に死ぬのか気になったので作りました。" />
<meta property="og:image" content="https://shinuwani.netlify.com/shinuwani.jpg" />
シェアデバッガー - Facebook for Developers
Card Validator | Twitter Developers
Twitter Preview
https://gyazo.com/5b1094802c9149e4d37cf8cf46fc7552
Real
https://gyazo.com/605989ee002c5ac2b889bbc79986f338
Facebook Preview
https://gyazo.com/d4dd014e3710c224ce5c41dfaace9e1b
Real
https://gyazo.com/a80db0cb4cc47f30c46d8a1c6ff4f85b
react-helmetを使う案もあったが、単独ページ単独ファイルなので直接headをいじる方がいいと判断した